<%--
  Created by IntelliJ IDEA.
  User: hz
  Date: 2024/7/21
  Time: 16:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/layui-v2.9.0/layui/css/layui.css" media="all">
    <script src="/layui-v2.9.0/layui/layui.js"></script>
</head>
<body>
<div style="width: 1380px">

    <div class="layui-col-xs10 layui-col-xs-offset1">

        <ul class="layui-nav layui-bg-gray">
            <li class="layui-nav-item left-nav layui-col-xs2">
                <!-- 品牌logo位置 -->
                <div class="nav-profile">
                    <!-- 图像使用div包裹，设置相对定位 -->
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="logo_img" src="/img/热趣部落.png" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="/forward/indexPage" style="color: black;">热趣部落</a>
                </div>
            </li>
            <li class="layui-nav-item layui-this layui-col-xs1"><a href="/forward/indexPage">首页</a></li>
            <li class="layui-nav-item layui-col-xs1"><a href="">热点</a></li>
            <li class="layui-nav-item layui-col-xs1">
                <a href="javascript:">模块</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:">趣点模块</a></dd>
                    <dd><a href="">动态模块</a></dd>
                    <dd><a href="">个人信息模块</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item "><a href="">关于</a></li>
            <!--            个人信息接口-->
            <li class="layui-nav-item layui-col-xs2" style="float: right">
                <div class="nav-profile">
                    <div class="nav-profile-img" style="margin-left: 20px;">
                        <img class="layui-nav-img" src="${sessionScope.user.upictureurl}" style="transform: scale(1.5);" alt="加载中"/>
                    </div>
                    <!-- 用户名链接 -->
                    <a href="javascript:" style="color: black;">${sessionScope.user.uname}</a>
                    <dl class="layui-nav-child" style="text-align: center">
                        <dd><a href="">个人信息</a></dd>
                        <dd><a href="">我的好友</a></dd>
                        <dd >
                            <div >
                                <a href="/logout/user"> <i class="layui-icon layui-icon-logout"></i> 退出登录</a>
                            </div>
                        </dd>
                    </dl>
                </div>
            </li>
        </ul>
    </div>

    <div class="layui-col-xs2 layui-col-xs-offset1" style="margin-top: 20px">
        <ul class="layui-nav layui-nav-tree layui-col-xs2 layui-bg-gray">
            <li class="layui-nav-item layui-this">
                <a href="javascript:" lay-on="selectStatus">趣点职务</a>
            </li>
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:" lay-on="postController">帖子管理</a>
            </li>
            <li class="layui-nav-item"><a href="javascript:" lay-on="sendBarNotice">发布公告</a></li>
            <li class="layui-nav-item"><a href="javascript:" lay-on="userControl">用户管理</a></li>
            <li class="layui-nav-item"><a href="javascript:" lay-on="editBar">修改趣点信息</a></li>
            <li class="layui-nav-item"><a href="javascript:" lay-on="upload">上传趣点图像</a></li>
        </ul>
    </div>


    <div class="layui-col-xs8" style="margin-top: 20px;margin-left: 10px">
        <div class="layui-card layui-bg-gray" id="this">

        </div>
    </div>
</div>
<script>

    layui.use(function (){
        var util = layui.util;
        //存储基本的数据，方便检查
        var bid = ${requestScope.bar.bid};
        var bname = '${requestScope.bar.bname}';
        var $ = layui.$;
        var statusData  = [];
        var layer = layui.layer;
        util.on({
            selectStatus: function(){
                console.log(this); // 当前触发事件的 DOM 元素
                layer.msg('加载成功');
                $.get("/html/selectStatus.html", function (data) {
                    $('#this').html(data);
                });
                $.ajax({
                    url: '/userStatus/getStatusByUidAndBid?uid=${sessionScope.user.uid}&bid='+bid,
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        statusData = res;
                        //进行数据填充
                        document.getElementById("barName").innerText = bname;
                        document.getElementById("subscribe").innerText = '关注人数：'+Math.ceil(Math.random()*100);
                        document.getElementById("postNum").innerText = ' '+Math.ceil(Math.random()*1000) +' ';
                        document.getElementById("barStatus").innerText = '本趣点职务：'+statusData.status;
                        console.log(statusData);
                    },
                    error: function () {
                        layer.msg('请求失败，请检查网络连接');
                    }
                });
            }
        })
    });

    layui.use(function (){
        var util = layui.util;
        //存储基本的数据，方便检查
        var bid = ${requestScope.bar.bid};
        var bname = '${requestScope.bar.bname}';
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        util.on({
            postController: function() {
                layer.msg('加载成功');
                table.render();
                $.get("/html/postController.html", function (data) {
                    $('#this').html(data);
                    table.render({
                        elem: '#ID-table-demo-setRowChecked',
                        id: 'ID-table-demo',
                        url: '/post/getPostByPageTable?bid=' + bid, // 此处为静态模拟数据，实际使用时需换成真实接口
                        page: true,
                        cols: [[
                            {
                                fixed: 'left',
                                title: '操作',
                                toolbar: '#templet-demo-theads-tool',
                                width: '10%',
                                align: 'center'
                            },
                            {field: 'pid', title: 'ID', width: '5%', fixed: 'left', unresize: true, sort: true},
                            {
                                field: 'user.uname', title: '发表用户',
                                templet: function (d) {
                                    return d.user ? d.user.uname : 'null';
                                },
                                width: '15%'
                            },
                            {field: 'ptime', title: '发表时间', width: '10%'},
                            {field: 'ptitle', title: '标题', width: '15%'},
                            {field: 'ptext', title: '内容', width: '25%'},
                            {field: 'purl', title: '图片', width: '10%'},
                            {field: 'pthumbs', title: '点赞数', width: '9%', sort: true},
                            {field: 'preplys', title: '回复数', width: '9%', sort: true},
                        ]],
                        initSort: { // 设置初始排序
                            field: 'pid', // 字段名
                            type: 'desc' // 倒序
                        },
                        limit: 5,
                        limits: [5, 10]
                    });
                    //删除某条帖子
                    table.on('tool(deletePost)', function (obj) {
                        console.log(obj.data);
                        layer.confirm("确认删除该条帖子？", {
                                icon: 3,
                                btn: ['确认', '取消']
                            },
                            function () {
                                $.ajax({
                                    url: '/post/deletePostById?pid=' + obj.data.pid,
                                    success: function (res) {
                                        // var cacheData = table.cache['ID-table-demo'];//获取缓存
                                        res === 'success' ? layer.msg("删除成功") : layer.msg("删除失败");
                                        obj.del();
                                        // var rowIndex = obj.tr.attr("data-index"); //获取行索引
                                        // cacheData.splice(rowIndex, 1);  //②彻底移除元素，从缓存里移除这一行
                                    },
                                    error: function () {
                                        layer.msg("删除失败，请检查网络");
                                    }
                                })
                            },
                            function () {
                                layer.msg('取消成功');
                            }
                        )
                    });
                });
            }
        })
    });


    layui.use(function (){
        var util = layui.util;
        //存储基本的数据，方便检查
        var bid = ${requestScope.bar.bid};
        var bname = '${requestScope.bar.bname}';
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        util.on({
            // 第三个界面(发布公告)的点击事件
            sendBarNotice : function(){
                $.get("/html/sendBarNotice.html", function (data) {
                    form.render();
                    $('#this').html(data);
                    update();
                    form.on('submit(demo2)', function(data){
                        var field = data.field; // 获取表单字段值
                        // 显示填写结果，仅作演示用
                        layer.alert(JSON.stringify(field), {
                            title: '当前填写的字段值'
                        });
                        // 此处可执行 Ajax 等操作
                        // …
                        $.ajax({
                            url: '/bar/updateBarAnnounce?bid='+bid,
                            type: 'post',
                            data: field,
                            success: function (res) {
                                layer.msg('修改成功');
                                update();
                            },
                            error: function () {
                                layer.msg('请求失败，请检查网络连接');
                            }
                        });
                        return false; // 阻止默认 form 跳转
                    });
                    function update() {
                        $.ajax({
                            url: '/bar/getBarByBid?bid='+bid,
                            dataType: 'json',
                            success: function (res) {
                                document.getElementById("notice").innerText = res.bannounce;
                            },
                            error: function () {
                                layer.msg('请求失败，请检查网络连接');
                            }
                        });
                    }
                });
            },
        })
    })


    layui.use(function (){
        var util = layui.util;
        //存储基本的数据，方便检查
        var bid = ${requestScope.bar.bid};
        var bname = '${requestScope.bar.bname}';
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        util.on({
            // 第四个界面(用户管理)的点击事件
            userControl : function(){
                $.get("/html/userControl.html", function (data) {
                    table.render();
                    $('#this').html(data);
                    table.render({
                        elem: '#ID-table-demo-setRowChecked',
                        url: '/subscribe/getSubscribeByBid?bid='+bid, // 此处为静态模拟数据，实际使用时需换成真实接口
                        page: true,
                        cols: [[
                            {fixed: 'left', title:'操作', toolbar: '#templet-demo-theads-tool', width:'10%',align:'center'},
                            {field:'usex', title: '性别', width:'10%'},
                            {field:'uname', title:'用户名', width:'10%'},
                            {field:'uemail', title:'用户邮箱', width:'15%'},
                            {field:'uaddress', title:'地址', width:'20%'},
                            {field:'usignature', title:'个性签名',width: '30%'},
                            {field:'uoccupation', title:'职业', width:'10%'},
                        ]],
                        initSort: { // 设置初始排序
                            field: 'uname', // 字段名
                            type: 'desc' // 倒序
                        },
                        limit:5,
                        limits:[5,10],
                    });
                    //删除某条帖子
                    table.on('tool(deleteUser)', function (obj) {
                        console.log(obj.data);
                        layer.confirm("确认取消该用户的关注？",{icon:3,
                                btn: ['确认', '取消']},
                            function (){
                                $.ajax({
                                    url:'/subscribe/deleteSubscribeByUB?bid='+bid+'&uid='+obj.data.uid,
                                    success : function (res){
                                        // var cacheData = table.cache['ID-table-demo'];//获取缓存
                                        layer.msg("删除成功");
                                        obj.del();
                                        // var rowIndex = obj.tr.attr("data-index"); //获取行索引
                                        // cacheData.splice(rowIndex, 1);  //②彻底移除元素，从缓存里移除这一行
                                    },
                                    error: function (){
                                        layer.msg("删除失败，请检查网络");
                                    }
                                })
                            },
                            function (){
                                layer.msg('取消成功');
                            }
                        )
                    });
                });
            },
        })
    });

    layui.use(function (){
        var util = layui.util;
        //存储基本的数据，方便检查
        var bid = ${requestScope.bar.bid};
        var bname = '${requestScope.bar.bname}';
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var transfer = layui.transfer;
        util.on({
            // 第五个界面(编辑趣点信息)的点击事件
            editBar : function(){
                $.get("/html/editBar.html", function (data) {
                    form.render();
                    $('#this').html(data);
                    // 兴趣标签数据加载
                    var data = [];
                    $.ajax({
                        url: '/interest/getAllInterestLabels',
                        type:"post",
                        dataType: 'json',
                        success: function (res) {
                            data = res;
                            // 渲染
                            transfer.render({
                                elem: '#ID-transfer-demo-showSearch',
                                id: 'ID-transfer-demo',
                                width: 300,
                                height: 300,
                                data: data,
                                title: ['未选——兴趣标签', '已选——兴趣标签'],
                                showSearch: true
                            });
                            //获取当前这个趣点已有的兴趣标签
                            $.ajax({
                                url : '/barinterest/getInfoByBid?bid='+bid,
                                dataType:'json',
                                success: function (res){
                                    var val = [];
                                    for(let i=0;i<res.length;i++){
                                        val[i] = res[i].value;
                                    }
                                    transfer.reload('ID-transfer-demo', {
                                        value: val,
                                    })
                                },
                                error: function (res){
                                    layer.msg('兴趣标签获取失败');
                                }
                            });
                        },
                        error: function (data) {
                            layer.msg('兴趣标签加载失败');
                        }
                    });
                    // 提交事件
                    form.on('submit(demo1)', function(data){
                        var field = data.field; // 获取表单字段值
                        // 显示填写结果，仅作演示用
                        // 此处可执行 Ajax 等操作
                        // …
                        var t = transfer.getData('ID-transfer-demo');
                        var dataToSend = {
                            'title': field.title,
                            'barText': field.barText,
                            'transfers': t
                        };
                        t = JSON.stringify(dataToSend);
                        $.ajax({
                            url: '/barinterest/updateBarMessage?bid='+bid,
                            type:"post",
                            data: t,
                            headers : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
                            success: function (res) {
                                layer.msg(res);
                            },
                            error: function (data) {
                                layer.msg('上传失败');
                            }
                        });
                        return false; // 阻止默认 form 跳转
                    });
                });
            },
        })
    });



    layui.use(function (){
        var $ = layui.$;
        var util = layui.util;
        //存储基本的数据，方便检查
        var bid = ${requestScope.bar.bid};
        var bname = '${requestScope.bar.bname}';
        var element = layui.element;
        var layer = layui.layer;
        var url;
        var upload = layui.upload;
        util.on({
            // 上传趣点头像
            upload : function(){
                $.get("/html/upload.html", function (data) {
                    $('#this').html(data);
                    // 单图片上传
                    var uploadInst = upload.render({
                        elem: '#ID-upload-demo-btn',
                        url: '/upload/uploadImg', // 实际使用时改成您自己的上传接口即可。
                        dataType: 'json',
                        before: function(obj){
                            // 预读本地文件示例，不支持ie8
                            obj.preview(function(index, file, result){
                                $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                            });

                            element.progress('filter-demo', '0%'); // 进度条复位
                            layer.msg('上传中', {icon: 16, time: 0});
                        },
                        done: function(res){
                            // 若上传失败
                            if(res.code > 0){
                                layer.msg('上传成功');
                                url = res.data;
                                //上传更新信息
                                $.ajax({
                                    url: '/bar/updateBarImgByBid?bid='+bid+'&url='+url,
                                    success: function (res) {
                                        layer.msg('更新成功');
                                    },
                                    error: function () {

                                    }
                                });
                            } else
                                layer.msg('上传失败');
                            console.log(res.data);
                            // 上传成功的一些操作
                            // …
                        },
                        error: function(){
                            // 演示失败状态，并实现重传
                            var demoText = $('#ID-upload-demo-text');
                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                            demoText.find('.demo-reload').on('click', function(){
                                uploadInst.upload();
                            });
                        },
                        // 进度条
                        progress: function(n, elem, e){
                            element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                            if(n === 100){
                                layer.msg('上传完毕', {icon: 1});
                            }
                        }
                    });
                });
            },
        })
    });





    layui.use( function() {
        var table = layui.table;
        var $ = layui.jquery;
        var element = layui.element;
        var util = layui.util;
        //存储基本的数据，方便检查
        var bid = ${requestScope.bar.bid};
        var bname = '${requestScope.bar.bname}';
        var layer = layui.layer;
        var form = layui.form;
        var statusData = [];
        var transfer = layui.transfer;
        var upload = layui.upload;
        //地址信息
        var url;

        // 可替换为转发请求路确保路径正确
        $.get("/html/selectStatus.html", function (data) {
            $('#this').html(data);
            $.ajax({
                url: '/userStatus/getStatusByUidAndBid?uid=${sessionScope.user.uid}&bid='+bid,
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    statusData = res;
                    //进行数据填充
                    document.getElementById("barName").innerText = bname;
                    document.getElementById("subscribe").innerText = '关注人数：'+Math.ceil(Math.random()*100);
                    document.getElementById("postNum").innerText = ' '+Math.ceil(Math.random()*1000) +' ';
                    document.getElementById("barStatus").innerText = '本趣点职务：'+statusData.status;
                    console.log(statusData);
                },
                error: function () {
                    layer.msg('请求失败，请检查网络连接');
                }
            });
        });
    });

</script>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<style>
    /* styles.css */
    .nav-profile {
        display: flex;
        align-items: center;
    }

    .nav-profile-img {
        position: relative;
        margin-right: 10px;
    }
    a{
        margin-left: 10px;
    }

    a:hover{
        text-decoration: underline;
    }
    /*标签图片*/
    .img-index{
        width: 20px;
        height: 20px;
    }
    hr{
        padding: 0;
        margin: 0;
    }
    .logo_img{
        width: 40px;
        height: 30px;
    }
    h3{
        margin-top: 0;
    }
    .layui-card-img { /* 使用新的类名或确保选择器能覆盖现有样式 */
        width: 200px; /* 假设我们想要将图片宽度设置为200px，您可以根据需要调整 */
        height: auto; /* 保持图片的高宽比 */
        border-radius: 0; /* 移除边框圆角 */
        border: none; /* 如果图片有边框，也移除它 */
        /* 可以添加其他图片样式，比如margin, padding等 */
    }
    .layui-btn-small {
        padding: 1px 10px;
        font-size: 15px;
    }
</style>

</body>
</html>